<template>
  <div class="advs isfixed">
    <div class="bg" :style="'background: '+data.bg+ ';opacity:'+data.opacity/100"></div>
    <div :class="'swiper-box '+data.showtype ">
      <div class="swiper" >
        <el-carousel indicator-position="none" @change="changesilde">
          <el-carousel-item v-for="(item, i) in data.imglist" :key="i">
              <vimage class="swiper-img" style="object-fit: cover;object-position: center center;" :src="item.url" v-if="item.url"></vimage>
              <img class="swiper-img" src="@/assets/images/banner.png" v-else />
          </el-carousel-item>
        </el-carousel>
      </div>
       <ul class='dots round' >
         <li v-for="(item,i) in data.imglist" :key="i" :class="activeIndex == i? 'dot active':'dot'" :style="'background:'+data.bg"></li>
       </ul>

      <p class="close" v-if="data.showtype!='full'"><i class="iconfont-m- el-icon-circle-close"></i></p>
      <p v-else class="count-down"><span  class="time" v-if="data.time>0">{{data.time}}s</span>
      <span  class="close-count" v-if="data.c_btns">关闭</span></p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data(){
    return {
      activeIndex:0
    }
  },
  methods:{
 changesilde(a, b) {
   console.log(a)
   this.activeIndex = a
 }
  }
};
</script>
<style>
  .el-carousel {
    height: 100% !important;

  }

  .el-carousel__container {
    height: 100% !important;

  }
</style>
<style lang="scss" scoped>
.advs {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .swiper-box {
    width: 280px;
    max-height: 428px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: translate(0, -24.42997px);
    .swiper{
      height: 428px;
    }
    .swiper-img {
        text-align: center;
        width: 100%;
        display: block;
    }
    .close {
      margin: 0 auto;
      left: 0;
      right: 0;
      position: absolute;
      color: #fff;
      border-radius: 50%;
      bottom: -50px;
      text-align: center;
      i{
            width: 30px;
            height: 30px;
            font-size: 30px;
      }
    }
    &.top {
      transform: translate(0, 0);

      .swiper-img{
        height: 428px;
        border-radius: 6px;
      }
      .close {
        width: 30px;
        height: 30px;
        top: -56px;
        right: 0;
        left: auto;
        position: absolute;
        color: #fff;
      }
    }
    &.bot{
      .swiper-img{
        height: 428px;
        border-radius: 6px;
      }
    }
    &.full{
          width: 100%;
          height: 100%;
          max-height: 100%;
          transform: translate(0, 0);
          top: 0;
          .swiper{
            height: 667px;
            .swiper-img{
              height: 667px;
            }
          }
          .count-down {
              position: absolute;
              bottom: 60px;
              right: 12px;
              z-index: 100;
              color: #fff;
              display: flex;
              flex-wrap: nowrap;
              height: 24px;
              line-height: 1;
              text-align: center;
              display: flex;
              justify-content: center;
              font-size: 12px;
              line-height: 24px;
              padding: 0 8px;
              overflow: hidden;
              background: rgba(0, 0, 0, 0.5);
              border-radius: 14px;
              .time {
                  margin-right: 2.5px;
              }
          }
    }
  }
}
    .dots {
      position: absolute;
      display: flex;
      bottom: 9.77199px;
      box-sizing: border-box;
      padding: 0 14.65798px;
      left: 0;
      right: 0;
      justify-content: center;
      z-index: 1000;
      .dot {
        width: 6px;
        height: 6px;
        background: #fff;
        margin: 0 3px;
        opacity: 0.54;

        &.active {
          opacity: 1;
        }

      }

      &.round {
        .dot {
          border-radius: 50%;
        }
      }


    }
</style>
